<div class="main-container">
    <div class="search-wrap">
        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
            <nz-form-item>
                <nz-form-label>闸门名称</nz-form-label>
                <nz-form-control>
                    <input formControlName="watergateCode" nz-input placeholder="闸门名称"/>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <button nz-button nzType="primary" (click)="queryInfo(true)"><i nz-icon nzType="search"></i>查询</button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>

    <div class="main-wrap">
        <nz-table #dataTable
                  class="main-table"
                  [nzData]="tableData"
                  [nzTotal]="total"
                  [nzFrontPagination]="false"
                  [nzWidthConfig]="tableWidthConfig"
                  [(nzPageIndex)]="pageNum"
                  [(nzPageSize)]="pageSize"
                  [nzLoading]="loading"
                  (nzPageIndexChange)="queryInfo()"
                  nzBordered
                  nzSize="middle">
            <thead>
            <tr>
                <th>序号</th>
                <th>闸门名称</th>
                <th>闸门类型</th>
                <th>控制模式</th>
                <th>采集时间</th>
                <th>报警状态</th>
                <th>水位报警</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of dataTable.data; let idx = index;">
                <td>{{pageSize * (pageNum - 1) + idx + 1}}</td>
                <td>{{data.watergateCode}}</td>
                <td>{{data.controlType}}</td>
                <td>{{data.controlMode}}</td>
                <td>{{data.gatherTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td>{{data.warnstatus}}</td>
                <td>{{data.waterwarn}}</td>
            </tr>
            </tbody>
        </nz-table>
    </div>

</div>
